<%--
  Created by IntelliJ IDEA.
  User: 陈fairy
  Date: 2018-12-14
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>


    <script>
        $(function () {

        })

        function searcha() {
            //返回表格的 Options。
            var opts = $("#usertb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/user/querySearch",{'username':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#usertb").bootstrapTable('load',data) ;
            })
        }

        function updateState(uid,ele){
            var state = $(ele).prop("checked");
            var stateInt = 0;
            if (state){
                stateInt = 1;
                doState(uid,stateInt);
            }else{
                stateInt = 0;
                $("input[name='uid']").val(uid);
                $("input[name='state1']").val(stateInt);
                $("#addmodal").modal('show')
            }

        }

        function doState(uid,stateInt){
            $.post("${pageContext.request.contextPath}/user/updateState",{"uid":uid, "state":stateInt},function (data) {
                if (data <0){
                    swal("提示信息", "出错了!", "error");
                }
            });
        }

        $(function () {

            $(function () {
                var elem = document.getElementById("state")

                var init = new Switchery(elem);
                //给状态按钮增加事件
                elem.onchange = function() {
                    //给name= state的checkbx设置value值
                    var flag = this.checked ;
                    if (flag){
                        $("#state").val(1);
                    }
                    else{
                        $("#state").val(0);
                    }

                };
            })


            $("#usertb").bootstrapTable({
                url:'${pageContext.request.contextPath}/user/queryuser',
                uniqueId:"id",
                //启用分页，但是默认情况下，是客户端分页
                pagination:true, //是否显示分页（*）
                clickToSelect: true,
                pageSize : 5,//单页记录数
                pageList : [5, 8, 10],//可选择单页记录数
                columns:[
                    {checkbox: true},
                    {field: 'id', title: '编号'},
                    {field: 'username', title: '用户名'},
                    //{field: 'pwd', title: '密码'},
                    {title: '状态',formatter:function (value,row,index) {
                            function str (){
                                if(row.state==1){
                                    return 'checked';
                                }else{
                                    return '';
                                }
                            }

                            return "<div class=\"onoffswitch\">\n" +
                                "<input name='state' onclick='updateState("+row.id+",this)' attr-id='"+row.id+"' type=\"checkbox\" "+str()+" class=\"onoffswitch-checkbox\" id="+row.id+">\n" +
                                "<label class=\"onoffswitch-label\" for="+row.id+">\n" +
                                "<span class=\"onoffswitch-inner\"></span>\n" +
                                "<span class=\"onoffswitch-switch\"></span>\n" +
                                " </label>\n" +
                                "</div>";
                        }},
                    {field: 'workname', title: '昵称'},
                    {field: 'sex', title: '性别'},
                    {field: 'phone', title: '电话'},
                    {field: 'borndate', title: '出生日期'},
                    {field: 'registeredDate', title: '注册日期'},
                    {field: 'nativeplace', title: '籍贯'},
                    {field: 'note', title: '注意'},
                    /*{title: '头像',formatter:function(value,row,index){
                            return "<img alt='image' class='img-circle' width='64px' height='64px' src='../"+row.img+"'>";
                        }},*/
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-info' onclick='tofenpei("+row.id+")'>分配角色</button>" +
                                "&nbsp;<button class='btn  btn-info' data-toggle=\"modal\" data-target=\"#updateModel\" onclick='toupdate("+row.id+")'>修改</button>";
                        }
                    },
                ]
            });



        });
        //分配角色
        function tofenpei(id) {
            $("#rid option:eq(0)").nextAll().remove();
            $('#modelId').modal('show');
            $.post("${pageContext.request.contextPath}/user/queryrole",{"uid":id},function (data) {
                $.each(data.list,function (index,item) {
                    $("#rid").append('<option value='+item.id+'>'+item.rname+'</option>');
                });
                if (data.role!=null){
                    $("#rid").val(data.role.id);
                }
                $("[name=uid]").val(id);
            });
        }
        function toupdate(id){
            console.log(id);
            var data = $("#usertb").bootstrapTable('getRowByUniqueId', id)
            console.log(data);
            $("#upForm [name='id']").val(data.id);
            $("#upForm [name='username']").val(data.username);
            $("#upForm [name='pwd']").val(data.pwd);
            $("#upForm [name='repwd']").val(data.pwd);
            $("#upForm [name='workname']").val(data.workname);
            $("#upForm [name='note']").val(data.note);
            if (data.sex=='男'){
                $("#upForm [name='sex'][value='男']").attr('checked',true);
            }else{
                $("#upForm [name='sex'][value='女']").attr('checked',true);
            }
            $("#upForm [name='phone']").val(data.phone);
            $("#upForm [name='nativeplace']").val(data.nativeplace);
            $("#upForm [name='borndate']").val(data.borndate);
            $("#upForm [name='registeredDate']").val(data.registeredDate);
        }
        function seve () {
            var uid = $("[name=uid]").val();
            var rid = $("#rid").val();
            $.post("${pageContext.request.contextPath}/user/updateRole",{"uid":uid,"rid":rid},function (data) {
                console.log(data)
                if (parseInt(data)>0){
                    swal("提示信息", "修改成功!", "success");
                    $('#modelId').modal('hide');
                } else{
                    swal("提示信息", "修改失败!", "error");
                    $('#modelId').modal('hide');
                }

            })
        }
        function upSeve() {
            var formStr=$('#upForm').serialize();
            var params = decodeURIComponent(formStr,true);
            $.ajax({
                url:"${pageContext.request.contextPath}/user/upUser",
                data:params,
                success:function (data) {
                    if(data>0){
                        swal("提示信息", "修改成功!", "success");
                        $.post("${pageContext.request.contextPath}/user/queryuser",function (data) {
                            $("#usertb").bootstrapTable("load", data);
                        })
                    }else{
                        swal("提示信息", "修改失败!", "error");
                    }
                    $('#updateModel').modal('hide');
                }
            })
        }
        function doDel() {
            var ids = "" ;
            //1.得到要删除的行
            //返回所选的行，当没有选择任何行的时候返回一个空数组。
            var rows = $("#usertb").bootstrapTable("getSelections") ;
            if (rows.length==0){
                swal("提示信息", "请选择要删除的数据!", "error");
            }
            else{
                $.each(rows,function (index,row) {
                    ids = ids + row.id + "-" ;
                }) ;

                swal({
                    title: "您确定要删除这条信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    closeOnConfirm: false
                }, function () {
                    var options = $("#usertb").bootstrapTable('getOptions') ;
                    $.post("${pageContext.request.contextPath}/user/delUser",{'ids': ids},function(data){
                        if (data>0){
                            //友好的提示
                            swal("提示信息！", "您已经永久删除了这条信息。", "success");
                            $.post("${pageContext.request.contextPath}/user/queryuser",function (data) {
                                $("#usertb").bootstrapTable("load", data);
                            })
                        }else{
                            //友好的提示
                            swal("提示信息！", "删除失败。", "error");
                        }
                    })

                });
            }
        }
        function doAdd(){
            // alert(id);
            //
            // var id = id;
            // id = parseInt(id);id
                //先获取模态框的所有值
            var stateInt = $("input[name='state1']").val();

            var formStr=$('#userform').serialize();
            state = decodeURIComponent(formStr,true);
            var uid = $("input[name='uid']").val();
            var liyou =$("#state1").val();
            console.log(stateInt);
            if(liyou != null && liyou != ""){
                //发送添加请求
                $.ajax({
                    'type':'post',
                    'url':'/states/addstates',
                    'data':{'userid':uid,'state':liyou},
                    success:function(data){
                        $("#addmodal").modal('hide') ;
                        $.post("${pageContext.request.contextPath}/user/updateState",{"uid":uid, "state":stateInt},function (data) {
                            if (data <0){
                                swal("提示信息", "出错了!", "error");
                            }
                        });
                        //重新加载表格
                        $('#tb').bootstrapTable('load',data) ;
                        //提示增加成功
                        swal("提示信息", "修改成功!", "success");
                    }
                })
            }else{
                swal("提示信息", "请填写信息!", "error");
            }
        };

    </script>


</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">员工列表</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button class="btn btn-primary" data-toggle="modal" data-target="#addModal"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                <button onclick="doDel()" class="btn btn-primary"><span class="glyphicon glyphicon-trash" ></span>&nbsp;&nbsp;删除</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="usertb"></table>
            </div>
        </div>

</div>

<!-- 修改角色 -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="">分配角色</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <div class="input-group col-sm-12">
                        <label for="rid" class="col-sm-2 control-label">角色</label>
                        <div class=" col-sm-8">
                            <select name="rid" id="rid" class="form-control">
                                <option value="-1">请选择</option>
                            </select>
                        </div>
                        <input type="hidden" name="uid" value="-1">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" onclick="seve();" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 增加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h1 class="modal-title" id="modelTitleId">添加车辆</h1>
            </div>
            <div class="modal-body">
                <form id="form" action="#" class="wizard-big">
                    <h1>第一步</h1>
                    <fieldset>
                        <h2>第一步</h2>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label for="addUserName">用户名</label>
                                    <input id="addUserName" name="username" type="text" class="form-control " placeholder="用户名">
                                </div>
                                <div class="form-group">
                                    <label for="addPwd">密码</label>
                                    <input id="addPwd" name="pwd" type="text" class="form-control " placeholder="用户名">
                                </div>
                                <div class="form-group">
                                    <label >确认密码</label>
                                    <input type="text" class="form-control " placeholder="用户名">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="text-center">
                                    <div style="margin-top: 20px">
                                        <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <h1>第二步</h1>
                    <fieldset>
                        <h2>第二步</h2>
                        <div class="row">
                            <div class="col-sm-8">

                                <div class="form-group">
                                    <label for="addWorkName">昵称</label>
                                    <input id="addWorkName" type="text" name="workname" class="form-control required" placeholder="昵称"/>
                                </div>

                                <div class="form-group">
                                    <label for="addNativeplace">籍贯</label>
                                    <input id="addNativeplace" type="text" name="nativeplace" class="form-control required" >
                                </div>

                                <div class="form-group">
                                    <label for="addPhone">电话</label>
                                    <input id="addPhone" type="text" name="phone" class="form-control required" placeholder="汽车进价">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="text-center">
                                    <div style="margin-top: 20px">
                                        <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <h1>第三步</h1>
                    <fieldset>
                        <h2>第三步</h2>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="addBorndate">出生日期</label>
                                <input id="addBorndate" type="date" name="borndate" class="form-control required" placeholder="汽车售价">
                            </div>
                            <div class="form-group">
                                <label for="addRegisteredDate">入职时间</label>
                                <input id="addRegisteredDate" type="date" name="registeredDate" class="form-control required" placeholder="汽车数量">
                            </div>
                        </div>
                        <div class="col-sm-4">

                            <div class="form-group">
                                <label for="state">状态</label>
                                <div>
                                    <input type="checkbox" class="js-switch" id="state" value="1" name="state" checked />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>性别</label>
                                <div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio"  value="男" name="sex" checked >
                                            男
                                        </label>
                                        <label>
                                            <input type="radio" value="女" name="sex">
                                            女
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <%--<h1>第四步</h1>
                    <fieldset>
                        <h2>第四步</h2>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="image">头像</label>
                                <img id="image" src="../static/img/img1.jpg" width="50px" height="50px" >
                            </div>
                        </div>
                    </fieldset>--%>
                    <h1>第四步</h1>
                    <fieldset>
                        <h2>第四步</h2>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="addNote">注意</label>
                                <textarea id="addNote" name="note" style="height:50%;"  class="form-control"></textarea>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" onclick="seve()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 修改模态框 -->
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modelTitleId1">修改信息</h4>
            </div>
            <div class="modal-body">
                <form action="#" class="form-horizontal" id="upForm">
                    <div class="form-group">
                        <label for="upusername" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="upusername" placeholder="用户名">
                        </div>
                        <input type="hidden" name='id'>
                    </div>
                    <div class="form-group">
                        <label for="uppwd" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="uppwd" type="password" name="pwd" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="reuppwd" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="reuppwd" type="password" name="repwd" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="workname" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="workname" type="text" name="workname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sexUp" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label for="sexUp" class="form-inline">男
                                <input id="sexUp" type="radio" class="radio"  name="sex" value="男" />
                            </label>
                            &nbsp;
                            <label for="nv" class="form-inline">女
                                <input id="nv" type="radio" class="radio" name="sex" value="女" />
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nativeplace" class="col-sm-2 control-label">籍贯</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="nativeplace" type="text" name="nativeplace" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="phone" type="text" name="phone" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="borndateUp" class="col-sm-2 control-label">出生日期</label>
                        <div class="col-sm-10">
                            <div class="input-group date" id="datetimepicker1" style="z-index: 999">
                                <input class="form-control" id="borndateUp" type="text" name="borndate" />
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="registeredDateUp" class="col-sm-2 control-label">入职时间</label>
                        <div class="col-sm-10">
                            <div class="input-group date" id="datetimepicker">
                                <input class="form-control" id="registeredDateUp" type="text" name="registeredDate" />
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                </form>
                        <label for="note" class="col-sm-2 control-label">备注信息</label>
                        <div class="col-sm-10">
                            <textarea class="form-control"  style="resize:none"  id="note" name="note"></textarea>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="upSeve();" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</div>
<%--添加模态框--%>
<div class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform" method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">禁用理由</h4>
                </div>
                <input type="hidden" value="" name="uid"/>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">禁用理由：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="state1" name="state" placeholder="理由"/>
                        </div>
                        <input type="hidden" name="state1" />
                    </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doAdd()">禁用</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

</html>
<style>
    .datepicker{z-index:9999!important;}
</style>
<script>
//^[0-9a-zA_Z]+$   只可以 字母 数字
    $(function () {

        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            locale: moment.locale('zh-cn')
        });

        $("#form").steps({
            bodyTag:"fieldset",
            transitionEffect: "slideLeft",
            onStepChanging:function(event,currentIndex,newIndex){
                if(currentIndex>newIndex){
                    return true
                }
                var form=$(this);
                if(currentIndex<newIndex){
                    $(".body:eq("+newIndex+") label.error",form).remove();
                    $(".body:eq("+newIndex+") .error",form).removeClass("error")
                }
                form.validate().settings.ignore=":disabled,:hidden";
                return form.valid()
            },onFinished:function(event,currentIndex){
                var form=$(this);
                var formStr=$('#form').serialize();
                var params = decodeURIComponent(formStr,true);
                console.log(params);
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/userAdd",
                    data:params,
                    success:function (data) {
                        if(data>0){
                            swal("提示信息", "增加成功!", "success");
                            $.post("${pageContext.request.contextPath}/user/queryuser",function (data) {
                                $("#usertb").bootstrapTable("loda", data);
                            })
                        }else{
                            swal("提示信息", "增加失败!", "error");
                        }
                    }
                })
            }
        }).validate({
            errorPlacement:function(error,element){
                element.before(error)
            },rules:{
                brand:"required",
                model:"required",
                level:"required",
                color:"required",
                price:{
                    required: true,
                    isNumber:true
                },
                money:{
                    required: true,
                    isNumber:true
                },
                count:{
                    required: true,
                    digits:true
                },
                date:"date"
            }, messages: {

            }
        })
    });
    
    $(function () {

        var image = document.getElementById('image');


        $(image).cropper({
            aspectRatio: 16 / 9,
            viewMode:1,
            crop: function (e) {
                console.log(e);
            }
        });
    })
    
</script>
